<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/distribution.pl/">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <title>正在加载..</title>

  <link rel="shortcut icon" sizes="32x32" href="images/shop-icon-32.png">

  <meta name="theme-color" content="#fff">
  <link rel="manifest" href="manifest.json">

  <style>

    body {
      margin: 0;
      font-family: 'Roboto', 'Noto', sans-serif;
      font-size: 13px;
      line-height: 1.5;
      min-height: 100vh;
    }

    /* styling for render while resources are loading */
    shop-app[unresolved] {
      display: block;
      min-height: 101vh;
      line-height: 68px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.3em;
      color: #202020;
      padding: 0 16px;
      overflow: visible;
    }
    .k-line2 {
            display:inline-block;
            background:#666;
            height:10px;
            width:10px;
            opacity:0;
            border-radius:50%;
            transform:translateX(-300px);
            background-color:#4b9cdb
        }
        .k-line12-1 {
            animation: k-loadingS 4s infinite;
            animation-delay: .8s
        }

        .k-line12-2 {
            animation: k-loadingS 4s infinite;
            animation-delay: .7s
        }

        .k-line12-3 {
            animation: k-loadingS 4s infinite;
            animation-delay: .6s
        }

        .k-line12-4 {
            animation: k-loadingS 4s infinite;
            animation-delay: .5s
        }

        .k-line12-5 {
            animation: k-loadingS 4s infinite;
            animation-delay: .4s
        }

        .k-line12-6 {
            animation: k-loadingS 4s infinite;
            animation-delay: .3s
        }

        .k-line12-7 {
            animation: k-loadingS 4s infinite;
            animation-delay: .2s
        }

        .k-line12-8 {
            animation: k-loadingS 4s infinite;
            animation-delay: .1s
        }

        @keyframes k-loadingS {
            40% {
                transform: translateX(0);
                opacity: .8
            }
            100% {
                transform: translateX(300px);
                opacity: 0
            }
        }
  </style>
</head>
<body>
  <shop-app unresolved>
      <div>
        <p style="font-size: 12px;">正在初始化应用，请耐心等候</p>
        <div class="k-line2 k-line12-1" ></div>
        <div class="k-line2 k-line12-2" ></div>
        <div class="k-line2 k-line12-3" ></div>
        <div class="k-line2 k-line12-4" ></div>
        <div class="k-line2 k-line12-5" ></div>
        <div class="k-line2 k-line12-6" ></div>
        <div class="k-line2 k-line12-7" ></div>
        <div class="k-line2 k-line12-8" ></div>
        </div>
</shop-app>

  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="src/shop-app.html">

  <script>
    window.performance && performance.mark && performance.mark('index.html');
  </script>

</body>
</html>
